<template>
  <div class="select" v-loading="loading">
    <div class="title">筛选</div>
    <el-form ref="form" :model="form" label-width="9.375rem" :inline="true">
      <el-form-item label="开始日期">
        <el-date-picker style="width: 13.125rem" v-model="form.date1" type="datetime" placeholder="选择日期时间"
          format="yyyy/MM/dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker style="width: 13.125rem" v-model="form.date2" type="datetime" placeholder="选择日期时间"
          format="yyyy/MM/dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="工序类型">
        <el-select style="width: 13.125rem" v-model="form.processType" clearable @change="change(form.processType)"
          @focus="getProcessType" disabled>
          <el-option v-for="item in processTypeOptions" :label="item" :value="item" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品类型">
        <el-select style="width: 13.125rem" v-model="form.productType" clearable @change="change2(form.productType)" disabled>
          <el-option v-for="item2 in productTypeOptions" :label="item2" :value="item2" :key="item2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品">
        <el-select style="width: 13.125rem" v-model="form.product" clearable disabled>
          <el-option v-for="(item3, index3) in productOptions" v-bind:key="index3" :label="item3.productName" :value="item3.productName"
            @click.native="change3(index3)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分析图形">
        <el-select style="width: 13.125rem" v-model="form.chartType" clearable>
          <el-option label="单值-移动极差图" value="单值-移动极差图"></el-option>
          <el-option label="均值-标准差图" value="均值-标准差图"></el-option>
          <el-option label="均值-极差图" value="均值-极差图"></el-option>
          <el-option label="中位数-极差图" value="中位数-极差图"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 30.625rem">
        <el-checkbox-group v-model="form.drawing">
          <el-checkbox label="图表" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item style="
          width: 100%;
          margin-top: 2.5rem;
          display: flex;
          justify-content: center;
        ">
        <el-button type="primary" @click="check()" style="margin-right: 2.5rem">
          查询图表
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getStationList, getProductList, getCheckInfoItemList, getSimpleSizeList, decryptPwd } from "service/common"
import { IEVersion } from './IEVersion.js'
import { testData } from './testData.js'

export default {
  data() {
    return {
      loading: false,
      form: {
        date1: this.moment().subtract(30, 'days').format('YYYY/MM/DD 00:00:00'), // 开始日期
        date2: this.moment().format('YYYY/MM/DD 23:59:59'), // 结束日期
        processType: 'PTH', // 工序类型
        productType: 'PTH_A222-2ICU', // 产品类型
        product: 'DCK035', // 产品
        // inspectionParameter: 'T01-OSP膜厚-过程检验', // 校检参数
        chartType: '单值-移动极差图', // 图表类型
        drawing: ['图表'],
        productInformation: null
      },
      options: null, // 所有选项
      processTypeOptions: [], // 工序类型选项
      productTypeOptions: [], // 产品类型选项
      productOptions: null, // 产品选项
      productOptionsIndex: 0, // 产品选项索引
    }
  },
  activated() {
    if (this.$route.params.back == true) {
      this.$router.push({
        path: '/chart'
      })
    } else {
      this.storage.remove('chartsData')
      this.storage.remove('chartsValue')
      this.storage.remove('sampleValue')
      this.storage.remove('change')
    }
  },
  // created() {
  //   this.loading = true

  //   // 解密字符串

  //   // 获取地址栏参数
  //   function getQueryVariable(variable) {
  //     var query = window.location.search.substring(1);
  //     var vars = query.split("&");
  //     for (var i = 0; i < vars.length; i++) {
  //       var pair = vars[i].split("=");
  //       if (pair[0] == variable) { return pair[1]; }
  //     }
  //     return (false);
  //   }

  //   let strEncryptedString = getQueryVariable('Key')
  //   // %20 替换为 +
  //   if (strEncryptedString) {
  //     strEncryptedString = decodeURIComponent(strEncryptedString.replace(/%20/g, '+'))
  //   } else {
  //     this.storage.set('userValidation', false)
  //     this.$router.push({
  //       name: '404'
  //     })
  //     return
  //   }
  //   // console.log(strEncryptedString)

  //   decryptPwd({ strEncryptedString }).then(res => {
  //     // console.log(res.data)
  //     if (res.data) {
  //     } else {
  //       this.$router.push({
  //         name: '404'
  //       })
  //     }
  //     this.loading = false
  //   }).catch(err => {
  //     this.$router.push({
  //       name: '404'
  //     })
  //     this.loading = false
  //   })
  // },
  mounted() {
    // this.$router.push({
    //   name: '404'
    // })

    this.storage.remove('IE')
    this.storage.remove('chartsData')
    this.storage.remove('chartsValue')
    this.storage.remove('sampleValue')
    this.storage.remove('change')

    // 判断是否为ie浏览器
    if (IEVersion() == -1 || IEVersion() == 'edge') {
      this.storage.set('IE', false)
    } else {
      this.storage.set('IE', true)
    }

    // 获取筛选数据
    // this.loading = true
    // getStationList().then(res => {
    //   this.options = res.data
    //   this.processTypeOptions = []
    //   for (let i of this.options) {
    //     if (i.indexOf('_') == -1) {
    //       this.processTypeOptions.push(i)
    //     }
    //   }
    //   // console.log(this.options)
    //   this.loading = false
    // }).catch(err => {
    //   this.$message.error({
    //     showClose: true,
    //     message: "服务器出错，请联系管理员",
    //   });
    //   this.loading = false
    // })
  },
  methods: {
    getProcessType() {
      if (this.processTypeOptions[0] == undefined) {
        this.loading = true
        getStationList().then(res => {
          this.options = res.data
          this.processTypeOptions = []
          for (let i of this.options) {
            if (i.indexOf('_') == -1) {
              this.processTypeOptions.push(i)
            }
          }
          // console.log(this.options)
          this.loading = false
        }).catch(err => {
          this.$message.error({
            showClose: true,
            message: "服务器出错，请联系管理员",
          });
          this.loading = false
        })
      }
    },
    // 产品类型
    change(option) {
      this.productTypeOptions = []
      for (let i of this.options) {
        if (i.indexOf(option) !== -1 && i !== option) {
          this.productTypeOptions.push(i)
        }
      }
      this.form.productType = null
      this.form.product = null
    },
    // 产品
    change2(value) {
      let params = {
        stationName: value
      }
      if (value !== '') {
        this.loading = true
        getProductList(params).then(res => {
          this.productOptions = res.data
          if (this.productOptions[0]) {
            this.form.product = this.productOptions[0].productName
            this.productOptionsIndex = 0
            this.form.productInformation = this.productOptions[0]
          }
          // console.log(res)
          this.loading = false
        }).catch(err => {
          this.$message.error({
            showClose: true,
            message: "服务器出错，请联系管理员",
          });
          this.loading = false
        })
      }
      this.form.product = null
    },
    change3(index) {
      this.productOptionsIndex = index
      this.form.productInformation = productOptions[index]
    },
    // 查询图表
    check() {
      let form = this.form
      // 表单验证
      if (form.date1 == null || form.date2 == null) {
        this.$message({
          message: '请选择查询日期',
          showClose: true,
          type: 'warning'
        });
        return
      } else if (form.processType == null || form.processType == '') {
        this.$message({
          message: '请选择 工序类型',
          showClose: true,
          type: 'warning'
        });
        return
      } else if (form.productType == null || form.productType == '') {
        this.$message({
          message: '请选择 产品类型',
          showClose: true,
          type: 'warning'
        });
        return
      } else if (form.product == null || form.product == '') {
        this.$message({
          message: '请选择 产品',
          showClose: true,
          type: 'warning'
        });
        return
      } else if (form.chartType == null || form.chartType == '') {
        this.$message({
          message: '请选择 分析图形',
          showClose: true,
          type: 'warning'
        });
        return
      }
      // 本地测试数据
      this.grouping(testData)
      // console.log(this.select(this.form.drawing, '图表'))
      // let params = {
      //   productNo: this.productOptions[this.productOptionsIndex].productNo,
      //   startTime: this.moment(form.date1).format('YYYY-MM-DD HH:mm:ss'),
      //   EndTime: this.moment(form.date2).format('YYYY-MM-DD HH:mm:ss'),
      //   Chart: this.select(this.form.drawing, '图表')
      // }
      // console.log(params)
      // this.loading = true
      // getCheckInfoItemList(params).then(res => {
      //   // console.log(res.data)
      //   if (res.data[0] == undefined) {
      //     this.$message({
      //       message: '未查询到数据',
      //       showClose: true,
      //       type: 'warning'
      //     });
      //     this.loading = false
      //     return
      //   }

      //   this.grouping(res.data)

      //   // // 15-20号数据
      //   // let chartsValue = {
      //   //   a2: 1,
      //   //   a3: 1.95,
      //   //   b3: 0,
      //   //   b4: 2.57,
      //   //   c4: 0.89,
      //   //   d3: 0,
      //   //   d4: 2.57,
      //   //   d_2: 1.69,
      //   //   e2: 1.77,
      //   //   iUSL: 0.5,
      //   //   iSL: 0.35,
      //   //   iLSL: 0.2,
      //   //   m_arrGrpSample: [[0.368, 0.358, 0.35], [0.363, 0.357, 0.353], [0.358, 0.339, 0.341], [0.367, 0.374, 0.358], [0.339, 0.359, 0.344], [0.357, 0.355, 0.35], [0.347, 0.356, 0.339], [0.334, 0.339, 0.328], [0.356, 0.348, 0.363], [0.375, 0.356, 0.344]],
      //   // }
      // }).catch(err => {
      //   this.$message.error({
      //     showClose: true,
      //     message: "服务器出错，请联系管理员",
      //   });
      //   this.loading = false
      // })
    },
    // 处理查询到的数据，跳转图表页面
    grouping(data) {
      // 排序
      function compare(property) {
        return function (a, b) {
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
        }
      }

      // 根据 testDate 重新进行分组
      let map = {}
      let testDate = []

      for (let i = 0; i < data.length; i++) {
        let ai = data[i]
        if (!map[ai.testDate]) {
          map[ai.testDate] = [ai]
          testDate.push(ai.testDate)
        } else {
          map[ai.testDate].push(ai)
        }
      }

      // 临时存放，用于排序
      let data2 = []
      for (let i = 0; i < testDate.length; i++) {
        data2.push(map[testDate[i]].sort(compare('groupdiff')))
      }
      // 二维数组 转 一维数组
      data = [].concat.apply([], data2)

      // console.log(data)

      let size = 0
      for (let i = 0, j = 0; i < data.length; i++) {
        size = i + 1
        if (data[i].groupdiff == 1) {
          j++
          if (j == 2) {
            size = i
            break
          }
        }
      }
      if (this.form.chartType == '单值-移动极差图') {
        size = 1
      }
      // console.log('size:', size)
      let iUSL, iSL, iLSL
      iUSL = data[0].sizeUpLimit == null ? 0 : data[0].sizeUpLimit * 1
      // 返回的 中限参数 可能为 ‘sizeMidLimit’ 或 ‘sizeMIdLimit’
      if (data[0].hasOwnProperty("sizeMidLimit")) {
        iSL = data[0].sizeMidLimit == null ? 0 : data[0].sizeMidLimit * 1
      } else if (data[0].hasOwnProperty("sizeMIdLimit")) {
        iSL = data[0].sizeMIdLimit == null ? 0 : data[0].sizeMIdLimit * 1
      }
      iLSL = data[0].sizeDownLimit == null ? 0 : data[0].sizeDownLimit * 1
      let chartsValue = {
        iUSL,
        iSL,
        iLSL,
        m_arrGrpSample: [],
        m_arrChartDate: [],
      }
      // 删除 groupdiff 为空的数据
      let sampleData = []
      for (let i = 0; i < data.length; i++) {
        if (data[i].groupdiff == null) {
          data.splice(i, 1)
        }
        sampleData.push(data[i].mfg * 1)
      }
      // 重新分组
      for (let i = 0; i < data.length; i += size) {
        chartsValue.m_arrChartDate.push(data[i].testDate)
        chartsValue.m_arrGrpSample.push(sampleData.slice(i, i + size))
      }

      // 获取常数值
      let SimpleSize = 0
      if (size == 1 || this.form.chartType == '单值-移动极差图') {
        SimpleSize = 2
      } else {
        SimpleSize = size
      }

      let simpleSizeList = {
        "id": 1,
        "enter_User": "94070301",
        "enter_Time": "2006-09-28T13:20:02.967",
        "sH_Status": 1,
        "company_ID": "C001",
        "sysCopyFID": null,
        "sampleSize": 2,
        "a": 2.121,
        "a2": 1.88,
        "a3": 2.659,
        "c2": 0.56,
        "c3": 0.43,
        "c4": 0.7979,
        "c5": 0.6,
        "b3": 0,
        "b4": 3.267,
        "b6": 2.606,
        "b5": 0,
        "d_2": 1.128,
        "d_3": 0.853,
        "d1": 0,
        "d2": 3.686,
        "d3": 0,
        "d4": 3.267,
        "e2": 2.66,
        "m3": 1,
        "m1A1": 1.88
      }
      chartsValue = { ...chartsValue, ...simpleSizeList }
      chartsValue.measuUnit = data[0].measuUnit
      chartsValue.sampleTimes = data[0].sampleTimes
      chartsValue.sampleUnit = data[0].sampleUnit

      // 确定规格
      if (chartsValue.iUSL == 0 && chartsValue.iSL == 0) {
        chartsValue.specifications = '单边下限'
      } else if (chartsValue.iLSL == 0 && chartsValue.iSL == 0) {
        chartsValue.specifications = '单边上限'
      } else {
        chartsValue.specifications = '双边对称'
      }
      // console.log(chartsValue.iUSL, chartsValue.iSL, chartsValue.iLSL)
      // console.log(chartsValue.specifications)

      // console.log('chartsValue:', chartsValue)

      // 跳转图表页面
      this.form.date1 = this.moment(this.form.date1).format('YYYY/MM/DD 23:59:59')
      this.form.date2 = this.moment(this.form.date2).format('YYYY/MM/DD 23:59:59')
      this.storage.set('chartsData', this.form)
      this.storage.set('chartsValue', chartsValue)
      this.storage.set('sampleValue', data)
      if (this.select(this.form.drawing, '图表')) {
        this.storage.set('change', true)
      } else {
        this.storage.set('change', false)
      }
      this.$router.push('/chart')

      this.loading = false

      // getSimpleSizeList({ SimpleSize }).then(res => {
      //   // console.log(res.data[0])
      //   chartsValue = { ...chartsValue, ...res.data[0] }
      //   chartsValue.measuUnit = data[0].measuUnit
      //   chartsValue.sampleTimes = data[0].sampleTimes
      //   chartsValue.sampleUnit = data[0].sampleUnit

      //   // 确定规格
      //   if (chartsValue.iUSL == 0 && chartsValue.iSL == 0) {
      //     chartsValue.specifications = '单边下限'
      //   } else if (chartsValue.iLSL == 0 && chartsValue.iSL == 0) {
      //     chartsValue.specifications = '单边上限'
      //   } else {
      //     chartsValue.specifications = '双边对称'
      //   }
      //   // console.log(chartsValue.iUSL, chartsValue.iSL, chartsValue.iLSL)
      //   // console.log(chartsValue.specifications)

      //   // console.log('chartsValue:', chartsValue)

      //   // 跳转图表页面
      //   this.form.date1 = this.moment(this.form.date1).format('YYYY/MM/DD 23:59:59')
      //   this.form.date2 = this.moment(this.form.date2).format('YYYY/MM/DD 23:59:59')
      //   this.storage.set('chartsData', this.form)
      //   this.storage.set('chartsValue', chartsValue)
      //   this.storage.set('sampleValue', data)
      //   if (this.select(this.form.drawing, '图表')) {
      //     this.storage.set('change', true)
      //   } else {
      //     this.storage.set('change', false)
      //   }
      //   this.$router.push('/chart')

      //   this.loading = false

      // }).catch(err => {
      //   this.$message.error({
      //     showClose: true,
      //     message: "服务器出错，请联系管理员",
      //   });
      //   this.loading = false
      // })

    },
    // 判断数组中是否存在某值
    select(data, text) {
      if (data.indexOf(text) === -1) {
        return false
      } else {
        return true
      }
    },
  },
}
</script>

<style scoped lang='scss'>
.select {
  // width: 62.5rem;
  // min-width: 62.5rem;
  // max-width: 62.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 4.375rem;
  margin-bottom: 1.875rem;
  background-color: #fff;
  box-shadow: .0625rem .1875rem .1875rem #ccc;
  border-radius: .5rem;
  .title {
    width: 100%;
    background-color: #e0ecff;
    background: linear-gradient(to bottom, #eff5ff 0, #e0ecff 100%);
    color: #31708f;
    border-color: #bce8f1;
    padding: .625rem .9375rem;
    border-top-left-radius: .1875rem;
    border-top-right-radius: .1875rem;
  }
  form {
    margin: 2.1875rem 0 3.125rem;
    padding-left: 4.375rem;
  }
}
</style>